<template>
	<view class="cu-load load-modal" v-if="visible">
		<view v-if="props.icon.length > 0" :class="props.icon" class="text-menu-color"></view>
		<image v-else class="round" src="/static/logo.jpg" mode="aspectFit"></image>
		<view class="text-menu-color margin-top-xs">加载中...</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, nextTick } from 'vue';
	const props = defineProps({
		value: {
			type: Boolean,
			default: false
		},
		icon: {
			type: String,
			default: ''
		}
	});
	const visible = ref(false);
	watch(
		() => props.value,
		(newValue : any, oldValue) => {
			nextTick(() => {
				visible.value = newValue;
			})
		}
	);
</script>

<style>
	.swiper-item {
		height: 100%;
	}
</style>